Add and Remove A Class So That Animation Can Be Replayed

Typically, when creating an animation:

You don't want the animation to start when the page first loads
You want the ability to reset and restart the animation.

These two concepts can be accomplished by creating a button to start the animation by adding a class and when the animation is finished removing the class to reset the animation.

Create an HTML file with the necessary jQuery framework script.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Add and Remove Classes</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>

Create a h1 and div element above the closing body tag (e.g., </body>) with two br element in between:

Create three objects (h1, button, and div) and give them names:

<h1>Add and Remove A Class So That Animation Can Be Replayed</h1>
<button class="PlayAnimation">Play Animation</button>
<br><br>
<div class="myBox"></div>
</body>

Add the following two highlighted classes, keyframe, and selector within a style element above the closing </head> tag:

Tell objects what to do:
- .myBox - class to tell the myBox object how to "look" (e.g., width, height, and color) and how to position itself (relative)
- .moveBox - class to tell myBox object what the animation name and duration will be
- @keyframe myAnimation - how to animate myBox
```
<style>
.myBox{width:100px; height:100px; background:red; position:relative;}  

.moveBox{animation-name: myAnimation; animation-duration: 4s;}
	
@keyframes myAnimation {
from{transform:translateX(0px);}
to{transform:translateX(400px);}
}

button{cursor:pointer}
</style>
</head>
```
NOTE: Even though the moveBox has the correct code to animate the box. It does not because the class is not assigned to the box YET. It will be ADDED programmatically when the button is clicked.
Add the the moveBox class to the div element:
```
<div class="myBox moveBox"></div>
```
CHECK POINT: Save the file and preview it in a browser. You should see the red box animate across the screen and then reset itself immediately after the page loads. However, it is best practice to have an object animate AFTER a page loads by some other means (e.g., button). This will be resolved later.
Remove the moveBox class as it was only used to show that the box would animate once the page is loaded.
```
<div class="myBox moveBox"></div>
```
Copy and paste the following highlighted script below the previous script element:
```
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(e) {

}); // end of document ready function
</script>
```
NOTES:
- The $(document).ready(function(){....}); BLANK code block is used to load the document BEFORE the rest of the script is executed. The good news is that this blank code block is used by most jQuery pages so you can make a snippet out of it to get you started.
- The $(...) denotes that this is a jQuery object and not an HTML object. jQuery can use either a CSS class or id reference (e.g., $(".PlayAnimation")) or a html reference (e.g., $("button") to refer to the same object. However, it always best to use a CSS reference.
- $(document) represents the actual web page document.
- The ready () method of the $(document) object load the page before ANY code is executed.
- The function(e) {...}); INSIDE of the ready() method tells the $(document) how to "function." However, we have not written any code on how it should function. This will be done in the next step.
- The comment (// end of document ready function) is a common practice that is used by many developers to highlight the close of a code block. You can usually tell a code block by looking for the sideway block head: }); -- a closing curly brace, parenthesis, and semi-colon.
Copy and paste the following highlighted script INTO the previous script element:
```
<script>
$(document).ready(function(e) {
$(".PlayAnimation").click(function(){
     $(".myBox").addClass("moveBox");
}); // end of click event
}); // end of document ready function
</script>	
```
NOTES:
- The $(".PlayAnimation").click(function(){....}); code block is used to tell the button to "listen" for a click and then execute a function with a statement. See next bullet for details.
- The $(".myBox").addClass("moveBox") statement is used to tell the myBox object to AUTOMATICALLY add the moveBox class so that it can animate as before when the moveBox class was added MANUALLY.
CHECK POINT: Save the file and preview it in a browser. Click the Play Animation button and you should see the red box animate across the screen and then reset itself. However, if you click the Play Animation button again, the red box will NOT move. The reason for this is that the ready() method only execute once. You could click the browser refresh button and then it will animate again. However, we need to resolve this problem so that a user don't have to click the browser refresh button to replay the animation.
Copy and paste the following highlighted script INSIDE the previous script element:
```
<script>
$(document).ready(function(e) {
$(".PlayAnimation").click(function(){
   $(".myBox").addClass("moveBox");

window.setTimeout(function() {
       /* Remove class when animation is complete so that it can be replayed */
       $(".PlayAnimation").html("Replay Animation");
       $(".myBox").removeClass("moveBox");
}, 4000); // end of window setTimeout

}); // end of click event	
	
}); // end of document ready function
</script>
```
NOTES:
- The window.setTimeout function(){...}); code block is used to tell the window to set a TIMER for a specific amount of time (In this case, 4000ms or 4 seconds) and then run what is inside the function when that time elapses:
  - relabel the button to Replay Animation
  - remove the moveBox class from the box so that the animation can be played again
- The setTimeout function() has two parameters that have to be passed into it:
- To make actions behave in a particular order, you can "wrap" them with a series of functions with each function executing as needed based on some type of EVENT. Notice in the example, you have several functions nested together.
- In Object Oriented Programming (OOP), every object has three characteristics that mimics real world objects:
- It is important to note the every OBJECT has one or more METHODS that is given when it was created.
- Remember, a function tells an object "how" to function. Most methods include regular functions as arguments of that method. So an object can have a method and a function at the SAME TIME (e.g., $(document).ready(function(e) {...});) where the method is ready and has a function as its argument of that method). Let's look at the examples below:
CHECK POINT: Save the file and preview it in a browser. Click the Play Animation button and you should see the red box move. Once the animation is finished, the animation is RESET and the button label changed from Play Animation to Replay Animation. If you click on the button again, this time it will play again.
(OPTIONAL) Preview the file in the Firefox browser, click the F12 key to open the Web Developer panel, click the Inspector tab, and then click the Play Animaiton button and notice how the moveBox class get INJECTED or added and then removed in the <div> element dynamically in the Inspector panel window.